<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>

  <body>
    <button class="btn1">发送get</button>
    <button class="btn2">发送delete</button>
    <button class="btn3">发送post</button>
    <button class="btn4">发送put请求</button>
    <script>
      /* 
        axios 请求别名 分2类： 参数区别
            1 、 2个参数的别名请求 ：  axios.别名(url,{配置项});
            2、  3个参数的别名请求 ：  axios.别名(url,{data},{配置项})
        
        
        
        */
      //    一、发送get请求
      let btn1 = document.querySelector(".btn1");
      btn1.onclick = async function () {
        // axios({配置项})
        // let { data } = await axios({
        //     url: "/getdata",
        //     method: "get",
        //     params:{
        //         a:1,
        //         b:2
        //     }
        // })
        // console.log(data);

        // 通过get别名发送请求
        // axios.get(url,{配置项})
        let { data } = await axios.get("/getdata", {
          params: {
            x: 1,
            y: 2,
          },
          timeout: 2000, // 配置超时时间为2s
        });
        console.log(data);
      };

      // 二、发送一个post请求
      // 是3个参数 ： axios.post(url,{data},{config});

      document.querySelector(".btn3").onclick = async function () {
        let { data } = await axios.post(
          "/getpostdata",
          { a: 10, b: 20 },
          { timeout: 2000 }
        );
        console.log(data);
      };

      // 三、发送一个delete请求 和get类似 也是2个参数
      // axios.delete(url,{配置项});
      document.querySelector(".btn2").onclick = async function () {
        let { data } = await axios.delete("/deletedata", {
          params: { x: 10, y: 20 },
        });
        console.log(data);
      };

      // 四、发送一个put请求  和 post类似 也是 3个参数
      // axios.put(url,{data},{配置项});

      document.querySelector(".btn4").onclick = async function () {
        let { data } = await axios.put("/putdata", { a: 11, b: 12 });
        console.log(data);
      };

      /* 
        发送axios请求 2种方式 
        一、通用方式  axios({配置项})
        二、别名
            1.两个参数   axios.get(url,{配置})
                        axios.delete(url,{配置})
            3.三个参数  axios.put(url,{data},{配置})
                        axios.post(url,{data},{配置})
        */
    </script>
  </body>
</html>
